<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入图标样式 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--顶部导航栏  -->
    <div class="top-bar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧欢迎区 -->
            <div class="welcome leftfix">
                <span class="hello">和利时欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右侧用户区 -->
            <div class="topbar-user rightfix">
                <ul class="list clearfix">
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的和利时</a></li>
                    <li><a href="#">和利时会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- logo -->
            <div class="header-logo leftfix">
                <img src="./images/hollysys-logo.jpg" alt="logo图片">
            </div>
            <!-- 搜索框 -->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>
    <!-- 主导航区 -->
    <div class="main-nav clearfix">
        <div class="container">
            <!-- 全部商品 -->
            <div class="all-types leftfix">
                全部商品分类
            </div>
            <!-- 商品列表 -->
            <div class="goods-list leftfix">
                <ul class="leftfix clearfix">
                    <li>和利时超市</li>
                    <li>优惠卷</li>
                    <li>买啥</li>
                    <li>和利时家电</li>
                    <li>和利时生鲜</li>
                    <li>PLUS会员</li>
                    <li>进口好物</li>
                    <li>品牌闪购</li>
                    <li>拍卖</li>
                    <li>五金商店</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 主要内容区 -->
    <div class="main-content">
        <div class="container clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav leftfix">
                <ul>
                    <li>
                        <!-- 一级菜单 -->
                        <a href="#">手机/运营商/数码</a>
                        <!-- 二级菜单 -->
                        <div class="second-menu">
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">电子书刊</a></dt>
                                    <dd><a href="#">电子书</a></dd>
                                    <dd><a href="#">网络原创</a></dd>
                                    <dd><a href="#">数字杂志</a></dd>
                                    <dd><a href="#">多媒体图书</a></dd>
                                </dl>
                            </div>
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">音像</a></dt>
                                    <dd><a href="#">影视</a></dd>
                                    <dd><a href="#">教育音像</a></dd>
                                </dl>
                            </div>
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">英文原版</a></dt>
                                    <dd><a href="#">少儿</a></dd>
                                    <dd><a href="#">商务投资</a></dd>
                                    <dd><a href="#">英语学习考试</a></dd>
                                    <dd><a href="#">文学</a></dd>
                                    <dd><a href="#">传记</a></dd>
                                    <dd><a href="#">励志</a></dd>
                                </dl>
                            </div>
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">文艺</a></dt>
                                    <dd><a href="#">小说</a></dd>
                                    <dd><a href="#">文学</a></dd>
                                    <dd><a href="#">青春文学</a></dd>
                                    <dd><a href="#">传记</a></dd>
                                    <dd><a href="#">艺术</a></dd>
                                </dl>
                            </div>
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">少儿</a></dt>
                                    <dd><a href="#">胎教</a></dd>
                                    <dd><a href="#">0-2岁</a></dd>
                                    <dd><a href="#">3-6岁</a></dd>
                                    <dd><a href="#">7-10岁</a></dd>
                                    <dd><a href="#">11-14岁</a></dd>
                                </dl>
                            </div>
                            <div class="clearfix">
                                <dl>
                                    <dt><a href="#">人文社科</a></dt>
                                    <dd><a href="#">历史</a></dd>
                                    <dd><a href="#">哲学</a></dd>
                                    <dd><a href="#">国学</a></dd>
                                    <dd><a href="#">政治/军事</a></dd>
                                    <dd><a href="#">法律</a></dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">电脑/办公</a>
                    </li>
                    <li>
                        <a href="#">家具/家居/家装/厨具</a>
                    </li>
                    <li>
                        <a href="#">男装/女装/童装/内衣 </a>
                    </li>
                    <li>
                        <a href="#">美妆/个护清洁/宠物 </a>
                    </li>
                    <li>
                        <a href="#">女鞋/箱包/钟表/珠宝 </a>
                    </li>
                    <li><a href="#">男鞋/运动/户外 </a></li>
                    <li><a href="#">房产/汽车/汽车用品 </a></li>
                    <li><a href="#">母婴/玩具乐器 </a></li>
                    <li><a href="#">食品/酒类/生鲜/特产 </a></li>
                    <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
                    <li><a href="#">医药保健/计生情趣</a></li>
                    <li><a href="#">图书/文娱/教育/电子书</a></li>
                    <li><a href="#">机票/酒店/旅游/生活</a></li>
                    <li><a href="#">众筹/白条/保险/企业金融</a></li>
                    <li><a href="#">安装/维修/清洗/二手</a></li>
                </ul>
            </div>
            <!-- 轮播图 -->
            <div class="slide leftfix">
            </div>
            <!-- 右侧导航 -->
            <div class="right-nav leftfix">
                <!-- 顶部快讯 -->
                <div class="flash-news">
                    <div class="content">
                        <dl>
                            <dt>
                                <span>和利时快报</span>
                                <a href="#">更多&nbsp;&gt;</a>
                            </dt>
                            <dd>
                                <a href="#">[特惠] 毛衣+直筒裤，才是YYDS</a>
                            </dd>
                            <dd>
                                <a href="#">[特惠] 超大容量的满足感来自于自信</a>
                            </dd>
                            <dd>
                                <a href="#">[特惠] 每日一件，衣柜满到塞不下</a>
                            </dd>
                            <dd>
                                <a href="#">[特惠] 媳妇儿再卖，我就疯给他看</a>
                            </dd>
                        </dl>
                    </div>
                </div>
                <!-- 底部列表数据 -->
                <div class="other-list">
                    <!-- 第一行 -->
                    <ul class="list-info clearfix">
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>火车票</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>加油卡</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>白条</span>
                        </li>
                    </ul>
                    <!-- 第二行 -->
                    <ul class="list-info clearfix">
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>电影票</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>酒店</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>理财</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>机票</span>
                        </li>
                    </ul>
                    <!-- 第三行 -->
                    <ul class="list-info clearfix">
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>礼品卡</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>彩票</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>游戏</span>
                        </li>
                        <li>
                            <div class="list-picture">
                                <a href="#"></a>
                            </div>
                            <span>众筹</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 秒杀专场 -->
            <div class="sale-area leftfix">
                <div class="container clearfix">
                    <ul>
                        <li>
                            <img src="./images/seckill.png" alt="秒杀专场">
                        </li>
                        <li>
                            <img src="./images/banner1.png" alt="">
                        </li>
                        <li>
                            <img src="./images/banner2.png" alt="">
                        </li>
                        <li>
                            <img src="./images/banner3.png" alt="">
                        </li>
                        <li>
                            <img src="./images/baner4.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="goods-detail clearfix">
                <div class="container">
                    <!-- 详情顶部 -->
                    <div class="detail-nav clearfix">
                        <span class="leftfix">家用电器</span>
                        <ul class="rightfix">
                            <li><a href="#">热门</a></li>
                            <li><a href="#">大家电</a></li>
                            <li><a href="#">生活电器</a></li>
                            <li><a href="#">厨房电器</a></li>
                            <li><a href="#">应季电器</a></li>
                            <li><a href="#">空气/净水</a></li>
                            <li><a href="#">高端电器</a></li>
                        </ul>
                    </div>
                    <!-- 详情内容区 -->
                    <div class="detail-content leftfix">
                        <div class="item item1">
                            <!-- 电器列表 -->
                            <div class="machine-list clearfix">
                                <ul>
                                    <li><a href="#">节能补贴</a></li>
                                    <li><a href="#">4K电视</a></li>
                                    <li><a href="#">空气净化器</a></li>
                                    <li><a href="#">IH电饭煲</a></li>
                                    <li><a href="#">滚筒洗衣机</a></li>
                                    <li><a href="#">电热水器</a></li>
                                </ul>
                            </div>
                            <!-- 电器图片 -->
                            <div class="machine-picture">
                                <img src="./images/编组.png" alt="电视机">
                            </div>
                        </div>
                        <div class="item item2">
                            <img src="./images/appliance_banner07.png" alt="奶粉">
                        </div>
                        <div class="item item3">
                            <div class="top">
                                <img src="./images/微波炉.png" alt="微波炉">
                            </div>
                            <div class="footer">
                                <img src="./images/空气炸锅.png" alt="空气炸锅">
                            </div>
                        </div>
                        <div class="item item4">
                            <img src="./images/冰箱.png" alt="冰箱">
                        </div>
                        <div class="item item5">
                            <div class="top">
                                <img src="./images/电饭煲.png" alt="电饭煲1">
                            </div>
                            <div class="footer">
                                <img src="./images/电饭煲2.png" alt="电饭煲2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="last-footer leftfix">
            <div class="container">
                <div class="list-info">
                    <ul>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">会员介绍</a></li>
                        <li><a href="#">生活旅行</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">联系客服</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">配送方式</a></li>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">211限时达</a></li>
                        <li><a href="#">配送服务查询</a></li>
                        <li><a href="#">配送费收取标准</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">在线支付</a></li>
                        <li><a href="#">分期付款</a></li>
                        <li><a href="#">公司转账</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">售后服务</a></li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">价格保护</a></li>
                        <li><a href="#">退款说明</a></li>
                        <li><a href="#">返修/退换货</a></li>
                        <li><a href="#">取消订单</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">特色服务</a></li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">DIY装机</a></li>
                        <li><a href="#">延保服务</a></li>
                        <li><a href="#">京东E卡</a></li>
                        <li><a href="#">京东通信</a></li>
                        <li><a href="#">鲸鱼座智能</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">自营覆盖区县</a></li>
                        <li><a href="#">京尚品汇已向全国2661个区县提供</a></li>
                        <li><a href="#">DIY装机</a></li>
                        <li><a href="#">延保服务</a></li>
                        <li><a href="#">京东E卡</a></li>
                        <li><a href="#">京东通信</a></li>
                        <li><a href="#">鲸鱼座智能</a></li>
                    </ul>
                </div>
                <div class="about clearfix">
                    <ul class="about-ul">
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系客服</a></li>
                        <li><a href="#">合作招商</a></li>
                        <li><a href="#">商家帮助</a></li>
                        <li><a href="#">营销中心</a></li>
                        <li><a href="#">手机京东</a></li>
                        <li><a href="#">友情链接</a></li>
                        <li><a href="#">销售联盟</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                    <div class="mark">
                        <p>京ICP备12345678901</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
</script>

</html>